<template>
  <div >
    <div class="one" style="position: fixed; top: 0; left: 0; right: 0;">
      <div class="one1" @click="fanhui"><van-icon name="arrow-left" /></div>
      <div class="one2">在线客服</div>
      <div class="one1"></div>
    </div>
    <div style="margin-top: 70px"></div>

  <div style="width: 100%;" v-for="item in chatHistory">
    <div class="kefu" v-if="item.status == 1">
      <van-image
          src="https://lsz-jyyx.oss-cn-beijing.aliyuncs.com/lsz-jyyx/2024/7/29/889bbc836b1f4354809eaecf36dead4c.jpg"
          width="55px"
          height="55px"
          style="margin-top: -25px; margin-left: 10px; border-radius: 2px;"
      />
      <div class="kefu1" :style="{ maxWidth: '270px' }">
        <div style="padding: 0 5px 0 5px; line-height: 25px">{{ item.content }}</div>
      </div>
    </div>
    <div class="yong" v-if="item.status == 2" >
      <div class="yong1" :style="{ maxWidth: '270px' }" >
        <div style="padding: 0 5px 0 5px; line-height: 25px;" >{{ item.content }}</div>
      </div>
      <van-image
          :src=user.photo
          width="55px"
          height="55px"
          style="margin-top: -25px; margin-right: 10px; border-radius: 5px;"
      />
    </div>
  </div>
    <div style="margin-top: 60px"></div>
    <div style="width: 100%;display: flex">
      <div style="position: fixed; bottom: 0;left: 0; width: 85%;background: white">
        <van-cell-group inset>
          <van-field
              v-model="value"
              rows="1"
              autosize
              type="textarea"
          />
        </van-cell-group>
      </div>
      <van-button type="primary" @click="fasong"
                  style="position: fixed;
                  bottom: 0;left: 0;
                  width: 15%;
                  margin-left: 83%;
                  background: #51b8ff;
                  height: 44px;
                  width: 74px;
                  border: white 1px solid;
                  margin-top: -10px" >发送</van-button>
    </div>


  </div>
</template>

<script >
import {chatAdd,selectByIp} from "@/api/SetUp/chat/chat";

  export default {
    directives: {
      maxWidth: {
        bind(el, binding) {
          const maxWidth = binding.value;
          el.style.maxWidth = `${maxWidth}px`;
          window.addEventListener('resize', () => {
            el.style.maxWidth = `${maxWidth}px`;
          });
        },
        unbind(el) {
          window.removeEventListener('resize', () => {
            el.style.maxWidth = '';
          });
        }
      }
    },
    data() {
      return {
        chatList:[],
        user:JSON.parse(localStorage.getItem('login')),
        value:null,
        chatHistory:[],
        chat1:{
          content:null,
          status:null,
          registerIp:null
        },
        chat2:{
          content:null,
          status:null,
          registerIp:null
        },
        Autoresponder:[
          {
            id:0,
            content:"我是陶吉吉,很高兴为你服务",
          },
          {
            id:1,
            content:"心情不好，那我给你唱蝴蝶喽。“当这世界已经准备将我一起，像一个伤兵被留在孤独荒野里，生命中充满乱七八糟的问题，像走在没有出口的那个迷宫里”",
          },
          {
            id:2,
            content:"你可以给你心爱的人唱我的那首《爱，很简单》。“忘了是怎么开始，也许就是对你，有一种感觉，忽然间发现自己，已深深爱上你...”",
          },{
            id:3,
            content:"可能是因为我当时太抽象了，导致现在很多年轻人get不到我的点",
          },
          {
            id:4,
            content:"票务代理，大麦，倒闭！票蜜蜂，倒闭！猫团美眼，倒闭！",
          },
          {
            id:5,
            content:"你可以跟客户说，小比崽子你想干什么",
          },
          {
            id:6,
            content:"我有点不太清楚你的请求，你可以换个问题问我",
          },

        ]
      };
    },
    created() {
      this.selectByIp()
    },
    methods: {
      // 发送聊天内容的方法
      fasong() {
        // 设置聊天内容、状态和注册 IP
        this.chat1.content = this.value;
        this.value = null;
        this.chat1.status = 2;
        this.chat1.registerIp = this.user.registerIp;

        // 将聊天记录加入历史记录
        this.chatHistory.push(this.chat1);

        // 添加聊天记录，并在回调中调用 keAdd 方法
        chatAdd(this.chat1).then(row => {
          this.keAdd();
        });
      },

// 处理回复的方法
      keAdd() {
        // 设置回复的状态和注册 IP
        this.chat2.status = 1;
        this.chat2.registerIp = this.user.registerIp;

        // 根据聊天内容选择不同的回复
        if (this.chat1.content.includes('在') || this.chat1.content.includes('有人') || this.chat1.content.includes('你好') || this.chat1.content.includes('您好')) {
          this.chat2.content = this.Autoresponder[0].content;
        } else if (this.chat1.content.includes('爱') || this.chat1.content.includes('喜欢')) {
          this.chat2.content = this.Autoresponder[2].content;
        } else if (this.chat1.content.includes('伤心') || this.chat1.content.includes('难过') || this.chat1.content.includes('心') || this.chat1.content.includes('痛') || this.chat1.content.includes('难受')) {
          this.chat2.content = this.Autoresponder[1].content;
        } else if (this.chat1.content.includes('年轻人') || this.chat1.content.includes('现在')) {
          this.chat2.content = this.Autoresponder[3].content;
        } else if (this.chat1.content.includes('抽象一下') || this.chat1.content.includes('票') || this.chat1.content.includes('难抢') || this.chat1.content.includes('演唱会')) {
          this.chat2.content = this.Autoresponder[4].content;
        } else if (this.chat1.content.includes('快递') || this.chat1.content.includes('用户') || this.chat1.content.includes('电话') || this.chat1.content.includes('堆积') || this.chat1.content.includes('快递员')) {
          this.chat2.content = this.Autoresponder[5].content;
        } else {
          this.chat2.content = this.Autoresponder[6].content;
        }
        // 添加回复记录，并将其加入历史记录
        chatAdd(this.chat2).then(row => {
          this.chatHistory.push(this.chat2);
        });
      },
      selectByIp(){
        selectByIp(this.user.registerIp).then(row => {
          this.chatList=row.data;
          this.chatList.sort((a, b) => a.id - b.id);
          this.chatList.forEach(item => {
              this.chatHistory.push(item)
          })
          console.log(this.chatHistory)
        })
      },
      fanhui() {
        this.$router.push("/mine")
      },



    }
  }

</script>

<style scoped>
.one{
  width: 100%;
  height: 60px;
  display: flex;
  background: white;
  z-index: 1000;
}
.one1{
  width: 10%;
  height: 60px;
  line-height: 60px;
  font-size: 20px;

}
.one2{
  width: 80%;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
}
.kefu{
  width: 90%;
  padding-right: 10%;
  display: flex;
  margin-top: 15px;
}
.yong {
  width: 90%;
  padding-left: 10%;
  display: flex;
  margin-top: 15px;
  justify-content: flex-end; /* 新增属性 */

}
.kefu1{
  margin-left: 15px;
  background: whitesmoke;
  border-radius: 5px;
  text-align: left;
  padding: 8px 3px 8px 3px;
}
.yong1{
  margin-right: 15px;
  background: #51b8ff;
  border-radius: 5px;
  text-align: left;
  padding: 8px 3px 8px 3px;
}

</style>
